import {
  Col,
  Row,
  Descriptions,
  Form,
  Input,
  Table,
  Button,
  Radio,
  Divider,
  message,
  Spin,
  Modal,
  Upload,
} from 'antd';
import { history } from 'umi';
import React, { useState } from 'react';
import request, { serverUrlRoot } from '../../../http';
import { askForLeave } from '@/pages/login/service';
interface Student {
  stuName: any;
  userNo: any;
  idNo: any;
  sex: any;
  email: any;
  mobileNo: any;
  collegesName: any;
  majorName: any;
  gradeName: any;
  className: any;
  teaName: any;
  teacherMobileNo: any;
}

const { TextArea } = Input;

export default function particulars(Props: any) {
  const [formObject] = Form.useForm(); //获取数据
  const [form] = Form.useForm(); //获取数据
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作事项',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
    },
    {
      title: '说明',
      dataIndex: 'reasonsFailure',
      key: 'reasonsFailure',
    },
  ];

  const [dataSource, setDataSource] = React.useState<any[]>(); //操作记录数据集合
  const getData = async () => {
    await request
      .get(
        (askForLeave.getAskForLeaveId().role == 1
          ? '/api/student/queryCurStuLeaveRecords?leaveId='
          : '/api/teacher/queryCurLeaveRecords?leaveId=') +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        if (response.code == 200 && response.data != null) {
          if (askForLeave.getAskForLeaveId().role == 1) {
            const data = response.data.data.map((item: any) => ({
              key: item.id,
              id: item.id,
              name: item.name,
              status:
                item.status == 0
                  ? '提交审请'
                  : item.status == 1
                  ? '审批不通过'
                  : '通过审批',
              operationTime: item.operationTime,
              reasonsFailure: item.reasonsFailure,
            }));
            setDataSource(data);
          } else {
            const data = response.data.map((item: any) => ({
              key: item.id,
              id: item.id,
              name: item.name,
              status:
                item.status == 0
                  ? '提交审请'
                  : item.status == 1
                  ? '审批不通过'
                  : '通过审批',
              operationTime: item.operationTime,
              reasonsFailure: item.reasonsFailure,
            }));
            setDataSource(data);
          }
        } else {
          /*message.error(
             response.message,
          );*/
        }
      });
  };

  const [desData, setDesData] = useState<Student>({
    stuName: '',
    userNo: '',
    idNo: '',
    sex: '',
    email: '',
    mobileNo: '',
    collegesName: '',
    majorName: '',
    gradeName: '',
    className: '',
    teaName: '',
    teacherMobileNo: '',
  });

  const Des = async () => {
    const result: any = await request.get(
      (askForLeave.getAskForLeaveId().role == 1
        ? '/api/student/queryCurStuBaseInfo?leaveId='
        : '/api/teacher/queryCurLeaveStuInfo?leaveId=') +
        askForLeave.getAskForLeaveId().id,
    );
    if (result.success) {
      setspinning(false);
      setDesData(result.data);
    }
  };

  const GetLeave = async () => {
    await request
      .get(
        (askForLeave.getAskForLeaveId().role == 1
          ? '/api/student/queryLeaveDetailByLeaId?leaveId='
          : 'api/teacher/queryLeaveDetailByLeaId?leaveId=') +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        if (response.code == 200) {
          formObject.setFieldsValue({
            theme: response.data.theme,
            startLeaveTime: response.data.startLeaveTime,
            endLeaveTime: response.data.endLeaveTime,
            leaveType: response.data.leaveType,
            reason: response.data.reason,
          });
        } else {
          // message.error('请假详情获取时发生/' + response.message + '/错误！！');
        }
      });
  };

  React.useEffect(() => {
    Des();
    GetLeave();
    GetFile();
    getData().finally();
  }, []);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [spinning, setspinning] = useState(true);

  const GetFile = async () => {
    await request
      .get(
        (askForLeave.getAskForLeaveId().role == 1
          ? '/api/student/queryStuLeaveAttach?leaveId='
          : '/api/teacher/queryStuLeaveAttach?leaveId=') +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        const data = response.data.map((item: any, index: number) => ({
          uid: index,
          name: item.fileName,
          status: 'done',
          response: 'jiu shi wan',
          url: serverUrlRoot + '/file/downloadFile/' + item.fileUrl.slice(30),
        }));
        setdefaultFileList(data);
      });
  };

  const [defaultFileList, setdefaultFileList] = useState();

  const props = {
    showUploadList: {
      showDownloadIcon: true,
      // downloadIcon: 'download ',
      showRemoveIcon: false,
    },
  };
  return (
    <Spin spinning={spinning} size="large">
      <Row justify="center" style={{ marginTop: 30 }}>
        <Col span={22}>
          <span style={{ color: 'red', fontSize: '25px', float: 'right' }}>
            {askForLeave.getAskForLeaveId().status == 0
              ? '审批中'
              : askForLeave.getAskForLeaveId().status == 1
              ? '审批不通过'
              : '审批通过'}
          </span>
        </Col>
        <Col span={22}>
          <Descriptions
            layout="vertical"
            labelStyle={{
              fontSize: '13px',
              fontWeight: 'bold',
            }}
            contentStyle={{
              fontSize: '16px',
            }}
            column={4}
          >
            <Descriptions.Item label="姓名">
              {desData.stuName}
            </Descriptions.Item>
            <Descriptions.Item label="学号">{desData.userNo}</Descriptions.Item>
            <Descriptions.Item label="院系">
              {desData.collegesName}
            </Descriptions.Item>
            <Descriptions.Item label="专业">
              {desData.majorName}
            </Descriptions.Item>
            <Descriptions.Item label="年级">
              {desData.gradeName}
            </Descriptions.Item>
            <Descriptions.Item label="班级">
              {desData.className}
            </Descriptions.Item>
            <Descriptions.Item label="班主任">
              {desData.teaName}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Form
            name="editForm"
            form={formObject}
            preserve={false}
            layout="vertical"
          >
            <Row gutter={24} justify="center">
              <Col span={24} key="1">
                <Form.Item
                  label="主题"
                  name="theme"
                  style={{ marginBottom: 24 }}
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="2">
                <Row gutter={24}>
                  <Col span={8} key="3">
                    <Form.Item label="开始日期" name="startLeaveTime">
                      <Input disabled />
                    </Form.Item>
                  </Col>
                  <Col span={8} key="4">
                    <Form.Item
                      label="结束日期"
                      name="endLeaveTime"
                      style={{ marginBottom: 24 }}
                    >
                      <Input disabled />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col span={24} key="5">
                <Form.Item label="请假原因" name="leaveType">
                  <Radio.Group disabled>
                    <Radio value={0}>病假（需附医院证明）</Radio>
                    <Radio value={1}>事假</Radio>
                    <Radio value={2}>其它</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24} key="6">
                <Form.Item
                  name="reason"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请假原因不能为空!',
                    },
                    { max: 60, message: '最大长度不能超过60!' },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <TextArea rows={4} style={{ marginTop: 10 }} disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="7">
                <Col span={4}>
                  附件：
                  <Upload fileList={defaultFileList} {...props}></Upload>
                </Col>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Divider orientation="left">操作记录</Divider>
          <Table columns={columns} dataSource={dataSource} pagination={false} />
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          {askForLeave.getAskForLeaveId().key ? (
            <></>
          ) : (
            <>
              <Button
                onClick={async () => {
                  await request
                    .get(
                      '/api/teacher/passLeave?leaveId=' +
                        askForLeave.getAskForLeaveId().id,
                    )
                    .then((response: any) => {
                      if (response.code == '200') {
                        history.goBack();
                        message.success('操作成功！');
                      } else {
                        message.error(response.message);
                      }
                    });
                }}
                style={{ margin: 10 }}
              >
                审批通过
              </Button>
              <Button
                onClick={async () => {
                  setIsModalVisible(true);
                }}
                style={{ margin: 10 }}
              >
                审批不通过
              </Button>
              <Modal
                title="不通过原因"
                visible={isModalVisible}
                footer={false}
                onCancel={() => {
                  setIsModalVisible(false);
                }}
              >
                <Form
                  form={form}
                  name="nest-messages"
                  onFinish={async () => {
                    await request
                      .get(
                        '/api/teacher/eliminateLeave?leaveId=' +
                          askForLeave.getAskForLeaveId().id +
                          '&reason=' +
                          form.getFieldsValue().reason,
                      )
                      .then((response: any) => {
                        if (response.code == '200') {
                          history.goBack();
                          message.success('操作成功！');
                        } else {
                          message.error(response.message);
                        }
                      });
                  }}
                >
                  <Form.Item
                    name="reason"
                    rules={[{ required: true, message: '请输入不通过原因' }]}
                  >
                    <TextArea
                      placeholder="请输入不通过原因"
                      autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                  </Form.Item>
                  <Form.Item>
                    <Button style={{ marginRight: 10 }} htmlType="submit">
                      确认
                    </Button>
                    <Button
                      onClick={() => {
                        setIsModalVisible(false);
                      }}
                    >
                      取消
                    </Button>
                  </Form.Item>
                </Form>
              </Modal>
            </>
          )}
          <Button
            onClick={() => {
              history.goBack();
            }}
            style={{ margin: 10 }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Spin>
  );
}
